<template>
  <div id="home" v-if="!isDeptUser">
    <el-row>
      <el-col style="background:#fff;border-radius:5px;margin:20px; padding:0 20px;width: calc(60% - 20px);height:410px">
        <h1><i class="index_icon index_icon_cygn"></i>常用功能<span><router-link :to="{ name: 'Map' }" exact class="docsearch" v-if="inRoles('ROLE_admin')">...全部功能</router-link></span></h1>
        <ul class="list_cygn">
          <li v-if="ROLEunit"><router-link :to="{ name: 'Dept' }" class="list_cygn_1" exact>机构编制</router-link></li>
          <li v-else><a class="list_cygn_1" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">机构编制</a></li>
          <li v-if="ROLEperson">
            <router-link :to="{ name: 'Person' }" class="list_cygn_2" exact>
              <el-popover v-if="tuixiunum!==0"
                title="提示"
                width="200"
                trigger="hover"
                :content="tuixiuText">
                <el-badge :value="tuixiunum" id="home_selection" slot="reference">
                  干部信息
                </el-badge>
              </el-popover>
              <span v-else>干部信息</span>
            </router-link>
            <el-alert
              style="position:fixed;width:140px;margin:10px 0 0 20px;"
              type="warning"
              effect="dark"
              class="alerta"
              v-if="syqText"
              >
              <slot name="title" style="margin:0">
                <router-link :to="{ name: 'shiyongqi' }">{{syqText}}</router-link>
              </slot>
            </el-alert>
          </li>
          <li v-else><a class="list_cygn_2" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">干部信息</a></li>
          <!-- <li><router-link :to="{ name: 'Mingce' }" class="list_cygn_3" exact>名册管理</router-link></li>
          <li><router-link :to="{ name: 'Shenghuohui' }" class="list_cygn_4" exact>民主生活会</router-link></li> -->
          <li v-if="inRoles('ROLE_kaohe')||inRoles('ROLE_admin')"><router-link :to="{ name: 'Assess' }" class="list_cygn_3" exact>干部考核</router-link></li>
          <li v-else><a class="list_cygn_3" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">干部考核</a></li>
          <li v-if="shenghuohuiAuth"><router-link :to="{ name: 'Shenghuohui' }" class="list_cygn_4" exact>民主生活会</router-link></li>
          <li v-else><a class="list_cygn_4" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">民主生活会</a></li>
          <li v-if="inRoles('ROLE_admin')||ROLExuanren">
            <router-link :to="{ name: 'Selection' }" class="list_cygn_5" exact>
              <el-badge :value="tasknum" id="home_selection" v-if="tasknum!==0">
                干部选任
              </el-badge>
              <span v-else>干部选任</span>
            </router-link>
              <el-alert
                v-if="archiveNum>0"
                style="position:fixed;width:140px;margin:10px 0 0 20px;"
                :title="'待归档人选:'+archiveNum"
                type="warning"
                effect="dark">
              </el-alert>
          </li>
          <li v-else><a class="list_cygn_5" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">干部选任</a></li>
          <li v-if="trainingAuth"><router-link :to="{ name: 'Train' }" class="list_cygn_6" exact>干部培训</router-link></li>
          <li v-else><a class="list_cygn_6" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">干部培训</a></li>
          <li v-if="inRoles('ROLE_meeting')||meetingNum"><router-link :to="{ name: 'meeting' }" class="list_cygn_7" exact>司内会议</router-link></li>
          <li v-else><a class="list_cygn_7" exact style=" filter:Gray; -webkit-filter: grayscale(100%);color:#999">司内会议</a></li>
        </ul>
        <!-- <h1 style="margin-top:20px;"><i class="index_icon index_icon_ywbl"></i>业务办理</h1>
        <ul class="list_ywbl"> -->
          <!-- <router-link tag="li" class="list_ywbl_2" :to="{ name: 'shenghuohuiList', params:{ zhuangtai: '正在办理业务' }}">正在办理业务<div class="ywnum">{{zhengzaibanli}}</div></router-link>
          <router-link tag="li" class="list_ywbl_4" :to="{ name: 'shenghuohuiList', params:{ zhuangtai: '相关业务' }}">相关业务<div class="ywnum">{{xiangguan}}</div></router-link> -->
          <!-- <li class="list_ywbl_2" >正在办理业务<div class="ywnum">{{zhengzaibanli}}</div></li>
          <li class="list_ywbl_4" >相关业务<div class="ywnum">{{xiangguan}}</div></li>
        </ul> -->
      </el-col>
      <el-col style="background:#fff;border-radius:5px;margin:20px 0 20px 0; padding:0 20px 20px;width: calc(40% - 20px);height:410px">
        <h1 style="margin-bottom:11px;"><i class="index_icon index_icon_xtgg"></i>人事制度<span><router-link :to="{ name: 'Zhidu' }" exact class="docsearch">...制度检索</router-link></span></h1>
        <section class="oneline">
          <el-table :show-header="false" :data="news" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column prop="name" label="文件" min-width="250">
            </el-table-column>
            <el-table-column prop="newsdate" width="90">
              <template slot-scope="scope">
                <el-button size="small" @click="docdownload(scope.row.id)" type="text" icon="el-icon-download">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="background:#fff;border-radius:5px;margin:0 20px;padding:0 20px 20px;width: calc(100% - 20px); position:relative">
        <h1 style="position:absolute; z-index:9999"><i class="index_icon index_icon_sjtj"></i>数据统计</h1>
        <section class="chart-container" style="margin:16px 0 0 40px">
          <el-row>
            <el-col :span="12">
              <Chart class="indexchart" id="mytest" height="360px" width="450px" :option="myoptionbar" />
            </el-col>
            <el-col :span="12">
              <Chart class="indexchart" id="mytest2" height="360px" width="450px" :option="myoptionpie" />
            </el-col>
          </el-row>
        </section>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Chart from '@/components/Chart.vue'
export default {
  props: ['ROLEunit', 'ROLEperson', 'ROLExuanren'],
  components: {
    Chart
  },
  data () {
    return {
      shenghuohuiAuth: false,
      syqText: '',
      tuixiuText: '',
      tuixiunum: 0,
      isDeptUser: false,
      archiveNum: 0,
      tasknum: 0,
      news: [],
      listLoading: false,
      myoptionbar: {
        type: Object
      },
      myoptionpie: {
        type: Object
      },
      myoptionpie2: {
        type: Object
      },
      zhengzaibanli: '-',
      xiangguan: '-',
      trainingAuth: false,
      meetingNum: 0
    }
  },
  methods: {
    getSyqNum () {
      this.$http
        .get(`/binfo/shiyongqiman`)
        .then(response => {
          // if (response.data.allnum) {
          if (response.data.num) {
            this.syqText = response.data.num + '人试用期满'
          }
        })
        .catch(error => {
          if (error.status === 500) {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          }
        })
    },
    getTuixiuNum () {
      this.$http
        .get(`/binfo/tuixiu`)
        .then(response => {
          this.tuixiunum = parseInt(response.data.num)
          this.tuixiuText = response.data.month + ' 有 ' + response.data.num + ' 名人员年龄到60周岁（' + response.data.names + '）'
        })
        .catch(error => {
          if (error.status === 500) {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          }
        })
    },
    getArchiveNum () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/busPersonArchive/getTodoNum`)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.archiveNum = parseInt(response.data.result)
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          if (error.status === 500) {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          }
        })
    },
    getAllNum () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getTodoStatNum`)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.tasknum = parseInt(response.data.result)
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          if (error.status === 500) {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          }
        })
    },
    inRoles (str) {
      let arr = JSON.parse(localStorage.getItem('Roles'))
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    init () {
      var _this = this
      this.$http
        .get(`/sta/info`)
        .then(function (response) {
          _this.myoptionbar = response.data.bar
          _this.myoptionpie = response.data.pie
          _this.zhengzaibanli = response.data.mywork.zhengzaibanli
          _this.xiangguan = response.data.mywork.xiangguan
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getnews () {
      var _this = this
      let para = {
        pageNum: 1,
        pageSize: 5
      }
      this.$http
        .post(`/ps/search`, para)
        .then(function (response) {
          _this.listLoading = false
          _this.news = response.data.list
        })
        .catch(function (error) {
          console.log('获取失败:' + error)
          // _this.$message({
          //   message: '获取失败:' + error,
          //   type: 'error'
          // })
        })
    },
    docdownload (id) {
      window.open(this.$http.defaults.baseURL + 'ps/file/' + id)
    },
    getShhAuth () {
      if (this.inRoles('ROLE_shhadmin') || this.inRoles('ROLE_admin')) {
        this.shenghuohuiAuth = true
        localStorage.setItem('shhAuth', 2)
      } else {
        this.$http
          .get(this.$http.defaults.shenghuohuiAPI + `api/newAuth/getCurrentUserAuth`)
          .then(response => {
            if (response.data.success) {
              if (response.data.result) {
                this.shenghuohuiAuth = true
                localStorage.setItem('shhAuth', response.data.result.auth)
                localStorage.setItem('type1', response.data.result.type1)
                localStorage.setItem('type2', response.data.result.type2)
                localStorage.setItem('type3', response.data.result.type3)
              }
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            if (error.status === 500) {
              this.$message({
                message: '网络获取失败:' + error,
                type: 'error'
              })
            }
          })
      }
    },
    getTrainingAuth () {
      // 培训模块管理员可以进入培训模块
      if (this.inRoles('ROLE_training')) {
        this.trainingAuth = true
      } else {
        // 一二三处人员、主管培训处副司长、司长可以进入培训模块
        this.$http
          .get(this.$http.defaults.trainingAPI + `api/trainingBusAuth/getHasTrainingAuth`)
          .then(response => {
            if (response.data.success) {
              if (response.data.result) {
                this.trainingAuth = true
              } else {
                // 模块内被授权用户可以进入培训模块
                this.$http
                  .get(this.$http.defaults.trainingAPI + `api/trainingBusAuth/getCurrentUserAuth`)
                  .then(res => {
                    if (res.data.success) {
                      if (res.data.result.length > 0) {
                        this.trainingAuth = true
                      } else {
                        // 系统管理员可以进入培训模块
                        if (this.inRoles('ROLE_admin')) {
                          this.trainingAuth = true
                        } else {
                          this.trainingAuth = false
                        }
                      }
                    } else {
                      this.$message({
                        message: '获取失败:' + res.data.message,
                        type: 'error'
                      })
                    }
                  })
                  .catch(error => {
                    if (error.status === 500) {
                      this.$message({
                        message: '网络获取失败:' + error,
                        type: 'error'
                      })
                    }
                  })
              }
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            if (error.status === 500) {
              this.$message({
                message: '网络获取失败:' + error,
                type: 'error'
              })
            }
          })
      }
    },
    getMeetingNum () {
      if (this.inRoles('ROLE_meeting')) {
        this.meetingNum = 1
      } else {
        let para = {
          status: 1,
          pageNum: 1,
          pageSize: 1
        }
        this.listLoading = true
        // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
        this.$http
          .post(this.$http.defaults.meetingAPI + `api/meetingBusTask/queryByPage`, para)
          .then(response => {
            this.meetingNum = response.data.result.total
          })
          .catch(error => {
            this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
      }
    }
  },
  mounted () {
    this.getShhAuth()
    this.getnews()
    this.init()
    if (this.inRoles('ROLE_xuanren')) {
      this.getArchiveNum()
      this.getAllNum()
    }
    this.getTuixiuNum()
    this.getSyqNum()
    this.shenghuohuiAuth = !!localStorage.getItem('shhAuth')
    this.getTrainingAuth()
    this.getMeetingNum()
  }
}
</script>
<style scoped>
h1{
  color:#206ab7;
  font-size:18px;
  line-height: 36px;
}
.index_icon{
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.index_icon_cygn{
  background:url(./assets/index_icon_cygn.png);
}
.index_icon_ywbl{
  background:url(./assets/index_icon_ywbl.png);
}
.index_icon_sjtj{
  background:url(./assets/index_icon_sjtj.png);
}
.index_icon_xtgg{
  background:url(./assets/index_icon_xtgg.png);
}
.list_cygn{
  width: 80%;
  margin:0 auto;
  overflow: hidden;
}
.list_cygn li{
  list-style: none;
  padding: 0;
  margin:0 0 40px 0;
  float:left;
  width: 20%;
  text-align: center;
}
.list_cygn li a{
  display: block;
  padding-top: 100px;
  text-decoration: none;
  color: #000;
  font-size:18px;
}
.list_cygn li a:hover{
  color:#f60;
}
.list_cygn_1{
  background: url(./assets/cy_icon_jgbz.png) no-repeat top center;
}
.list_cygn_2{
  background: url(./assets/cy_icon_gbxx.png) no-repeat top center;
}
.list_cygn_3{
  background: url(./assets/cy_icon_mcgl.png) no-repeat top center;
  background: url(./assets/checklist.png) no-repeat top center;
}
.list_cygn_4{
  background: url(./assets/cy_icon_mzshh.png) no-repeat top center;
}
.list_cygn_5{
  background: url(./assets/cy_icon_selection.png) no-repeat top center;
}
.list_cygn_6{
  background: url(./assets/cy_icon_mcgl.png) no-repeat top center;
}
.list_cygn_7{
  background: url(./assets/cy_icon_meeting.png) no-repeat top center;
}
h1{
  clear:both;
}
.list_ywbl{
  width: 600px;
  margin:0 auto;
  overflow: hidden;
}
.list_ywbl li{
  width:150px;
  height:80px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  float:left;
  list-style: none;
  margin: 20px 40px;
  display: inline;
  padding:10px;
  text-align: center;
}
.list_ywbl li{
  cursor: pointer;
  font-size:14px;
  font-weight: bolder;
  color: #fff;
  text-decoration: none;
}
.list_ywbl li:hover{
  opacity: .6;
}
.list_ywbl li div{
  font-size: 50px;
  text-align: center;
}
.list_ywbl_1{
  background:#91c7ae;
}
.list_ywbl_2{
  background:#c23531;
}
.list_ywbl_3{
  background:#2f4554;
}
.list_ywbl_4{
  background:#61a0a8;
}
.list_ywbl_5{
  background:#d48265;
}
a{
  text-decoration: none;
  color: #204F7F
}
a:hover{
  text-decoration:underline;
  color: #f60;
}
.indexchart {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #f9f9f9;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0 auto;
    padding:10px;
}
.docsearch{
  float:right;
  font-weight: normal;
  font-size:var(--size14);
  padding-right:10px;
}
</style>
<style>
#home_selection .el-badge__content.is-fixed{
  top: 12px; right: -3px;
}
.oneline .cell{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
</style>
<style>
.list_cygn li .alerta p{
  margin: 0 !important;
}
.list_cygn li .alerta a{
  padding-top:0 !important;
  color:#fff !important;
  font-size:var(--size12) !important;
}
</style>
